const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
var MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
  // production 线上环境打包使用
  // development 开发环境打包使用
  mode: 'development',
  // webpack入口
  entry: './src/main.js',
  // 出口
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
  plugins: [
    // HTML 插件
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
      // 输出的css文件名不变的意思
    })
  ],
  module: {
    // 配置规则
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 'style-loader',
          //将css打包到style标签中

          // 2. 将css打包到独立文件中
          MiniCssExtractPlugin.loader,

          //1. css-loader将样式文件输出到js中
          'css-loader'
        ]
      },

      // {
      //   // 识别css文件并插入html
      //   test: /\.css$/i,
      //   // loader 加载是从后往前的
      //   use: ["style-loader", "css-loader",]
      // },
      {
        // 识别less文件并插入html
        test: /\.less$/i,
        // loader 加载是从后往前的
        use: ["style-loader", "css-loader", "less-loader"]
      },
      {
        // 图片文件的配置(仅适用于webpack5版本)
        test: /\.(gif|png|jpg|jpeg)/,
        type: 'asset' // 匹配上面的文件后, webpack会把他们当做静态资源处理打包
        // 如果你设置的是asset模式
        // 以8KB大小区分图片文件
        // 小于8KB的, 把图片文件转base64, 打包进js中
        // 大于8KB的, 直接把图片文件输出到dist下
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        type: 'asset/resource', // 所有的字体图标文件, 都输出到dist下
        generator: { // 生成文件名字 - 定义规则
          filename: 'fonts/[name].[hash:4][ext]' // [ext]会替换成.eot/.woff
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, // 不去匹配这些文件夹下的文件
        use: {
          loader: 'babel-loader', // 使用这个loader处理js文件
          options: { // 加载器选项
            presets: ['@babel/preset-env'] // 预设: @babel/preset-env 降级规则-按照这里的规则降级我们的js语法
          }
        }
      }
    ]
  },
  devServer: {
    port: 3000, // 端口号
    open: true
  }
};